<template>
  <div class="page-layout">
    <el-form :model="formInline" ref="form" label-width="90px" class="form-inline" size="mini" label-suffix="：">
      <el-row :gutter="2">
        <!-- <el-col :lg="6" :xl="4"><el-form-item label="保单号">
            <el-input v-model="formInline.insureNum" placeholder="请输入保单号"></el-input>
          </el-form-item></el-col>
        <el-col :lg="6" :xl="4"><el-form-item label="订单号">
            <el-input v-model="formInline.orderNum" placeholder="请输入订单号"></el-input>
          </el-form-item></el-col>
        <el-col :lg="6" :xl="4"><el-form-item label="箱号">
            <el-input v-model="formInline.containerNumber" placeholder="请输入箱号"></el-input>
          </el-form-item></el-col>
        <el-col :lg="6" :xl="4"><el-form-item label="运单号">
            <el-input v-model="formInline.tagInvoiceWaybill" placeholder="请输入运单号"></el-input>
          </el-form-item></el-col>
        <el-col :lg="1" :xl="1"><el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item></el-col> -->
      </el-row>
    </el-form>
    <div style="margin-bottom: 12px">
      <el-button type="primary" size="mini" @click="add">新增</el-button>
    </div>
    <el-table ref="table" border :data="tableData" :height="tableHeight" :style="{ width: '100%' }">
      <el-table-column prop="accountType" label="发票类型" width="90">
        <template slot-scope="scope">
          <span>{{ scope.accountType * 1 === 1 ? "企业" : "个人" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="invoiceHead" label="发票抬头"> </el-table-column>
      <el-table-column prop="creditCode" label="税号"> </el-table-column>
      <el-table-column prop="consigneeMail" label="收件人邮箱"> </el-table-column>
      <el-table-column prop="consigneePhone" label="收件人电话">
      </el-table-column>
      <el-table-column prop="bankBranchName" label="开户银行"> </el-table-column>
      <el-table-column prop="bankAccount" label="银行账户"> </el-table-column>
      <el-table-column prop="companyPhone" label="电话号码">
      </el-table-column>
      <el-table-column prop="registerAddress" label="单位地址">
      </el-table-column>
      <!-- <el-table-column prop="consigneeName" label="收件人姓名">
      </el-table-column>
      <el-table-column prop="consigneePhone" label="收件人电话">
      </el-table-column>
      <el-table-column prop="consigneeAddress" label="收件人地址">
      </el-table-column> -->
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="800" v-loading="loading">
      <el-form :model="ruleForm" ref="ruleForm" label-width="110px">
        <el-form-item label="发票抬头" prop="invoiceHead" :rules="[
      { required: true, message: '请输入发票抬头' },
    ]">
          <el-input placeholder="请输入发票抬头" v-model="ruleForm.invoiceHead"></el-input>
        </el-form-item>
        <el-form-item label="税号" prop="creditCode" :rules="[
      { required: true, message: '请输入税号' },
    ]">
          <el-input placeholder="请输入税号" v-model="ruleForm.creditCode"></el-input>
        </el-form-item>
        <el-form-item label="收件人邮箱" prop="consigneeMail" :rules="[
      { required: true, message: '请输入收件人邮箱' },
    ]">
          <el-input placeholder="请输入收件人邮箱" v-model="ruleForm.consigneeMail"></el-input>
        </el-form-item>
        <el-form-item label="收件人电话" prop="consigneePhone" :rules="[
      {
        validator: (rule, value, callback) =>
          validatePhone(rule, value, callback)
      }
    ]">
          <el-input placeholder="请输入收件人电话" v-model="ruleForm.consigneePhone"></el-input>
        </el-form-item>
        <el-form-item label="开户银行" prop="bankBranchName">
          <el-input placeholder="请输入开户银行" v-model="ruleForm.bankBranchName"></el-input>
        </el-form-item>
        <el-form-item label="银行账户" prop="bankAccount">
          <el-input placeholder="请输入银行账户" v-model="ruleForm.bankAccount"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" prop="companyPhone" :rules="[{
      validator: (rule, value, callback) =>
        validatePhone(rule, value, callback)
    },
    ]">
          <el-input placeholder="请输入电话号码" v-model="ruleForm.companyPhone"></el-input>
        </el-form-item>
        <el-form-item label="单位地址" prop="registerAddress">
          <el-input placeholder="请输入单位地址" v-model="ruleForm.registerAddress"></el-input>
        </el-form-item>
        <!-- <el-form-item label="收件人姓名" prop="consigneeName" :rules="[
        { required: true, message: '请输入收件人姓名' },
      ]">
          <el-input placeholder="请输入收件人姓名" v-model="ruleForm.consigneeName"></el-input>
        </el-form-item>
        
          <el-input placeholder="请输入收件人电话" v-model="ruleForm.consigneePhone"></el-input>
        </el-form-item>
        <el-form-item label="收件人地址" prop="consigneeAddress" :rules="[
        { required: true, message: '请输入收件人地址' },
      ]">
          <el-input placeholder="请输入收件人地址" v-model="ruleForm.consigneeAddress"></el-input>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getLabel } from "@/utils/func";
import { AccountTypeList } from "@/utils/options";
export default {
  computed: {
    bank() {
      const bank = localStorage.getItem("bank");
      if (bank) {
        return JSON.parse(bank);
      }
      return {};
    },
    hasInvoiceId() {
      return !!this.invoiceId || this.invoiceId === 0;
    },
  },
  data() {
    return {
      loading: false,
      formInline: {
        // insureNum: "",
        // orderNum: "",
        // containerNumber: "",
        // tagInvoiceWaybill: "",
      },
      invoiceId: "",
      title: "新增发票",
      accountTypeList: AccountTypeList,
      areaList: [],
      bankList: [],
      bankBranchList: [],
      ruleForm: {
        invoiceHead: "",
        creditCode: "",
        registerAddress: "",
        companyPhone: "",
        consigneeName: "",
        consigneePhone: "",
        consigneeMail: "",
        consigneeAddress: "",
        bankAccount: "",
        bankBranchName: "",
      },
      dialogVisible: false,
      tableHeight: 0,
      tableData: [],
    };
  },
  methods: {
    validatePhone(rule, value, callback) {
      if (!value) {
        callback();
      }
      if (!/^1[3-9]\d{9}$/.test(value)) {
        callback("请输入正确的手机号码");
      }
      callback();
    },
    add() {
      this.title = "新增发票";
      this.dialogVisible = true;
      this.invoiceId = "";
    },
    edit(row) {
      this.title = "编辑发票";
      this.dialogVisible = true;
      this.invoiceId = row.invoiceId;
      this.ruleForm = {
        invoiceHead: row.invoiceHead,
        creditCode: row.creditCode,
        registerAddress: row.registerAddress,
        companyPhone: row.companyPhone,
        consigneeName: row.consigneeName,
        consigneePhone: row.consigneePhone,
        consigneeMail: row.consigneeMail,
        consigneeAddress: row.consigneeAddress,
        bankAccount: row.bankAccount,
        bankBranchName: row.bankBranchName,
      };
      this.getBankBranchList().then((res) => {
        this.ruleForm.bankBranchName = res.find(
          (item) => item.bankBranchName === row.bankBranchName
        ).bankBranchId;
      });
    },
    del(row) {
      this.$toConfirm("是否确认删除", "warning", "提示")
        .then(() => {
          this.delConfirm(row);
        })
        .catch(() => {
          //
        });
    },
    delConfirm(row) {
      this.$post("/config/invoice/delete", {
        invoiceId: row.invoiceId,
      }).then(() => {
        this.$message.success("删除成功");
        this.getTableData();
      });
    },
    phoneNumberRight(rule, value, cb) {
      if (!/^1[3-9]\d{9}$/.test(value)) {
        cb("请输入正确的联系方式");
      }
      cb();
    },
    getBankList() {
      return this.$get("/bank/account/bank").then((res) => {
        this.bankList = res.data;
      });
    },
    getBankBranchList() {
      if (!this.ruleForm.areaName || !this.ruleForm.bankName) {
        return;
      }
      const params = {
        areaId: this.ruleForm.areaName,
        bankId: this.ruleForm.bankName,
      };
      return this.$get("/bank/account/bankbranch", params).then((res) => {
        this.bankBranchList = res.data;
        return res.data;
      });
    },
    onSubmit() {
      const {
        invoiceHead,
        creditCode,
        registerAddress,
        companyPhone,
        consigneeName,
        consigneePhone,
        consigneeMail,
        bankAccount,
        bankBranchName,
      } = this.ruleForm;
      const params = {
        invoiceHead,
        creditCode,
        registerAddress,
        companyPhone,
        consigneeName,
        consigneePhone,
        consigneeMail,
        bankAccount,
        bankBranchName,
      };
      const url = this.hasInvoiceId
        ? "/config/invoice/update"
        : "/config/invoice/add";
      if (this.hasInvoiceId) {
        params.invoiceId = this.invoiceId;
      }
      const message = this.hasInvoiceId ? "编辑成功" : "新增成功";
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.loading) {
            return;
          }
          this.loading = true;
          this.$post(url, params)
            .then(() => {
              this.$message.success(message);
              this.dialogVisible = false;
              if (this.$route.query.insureInfoId) {
                this.$router.push(
                  `/temp1?insureInfoId=${this.$route.query.insureInfoId}&templateName=${this.$route.query.templateName}&getInsuredDataFromCache=true`
                );
              }
              this.getTableData();
            })
            .finally(() => {
              this.loading = false;
            });
        }
      });
    },
    setTableHeight() {
      this.$nextTick(() => {
        const bodyHeight = window.innerHeight;
        const queryHeight =
          this.$refs.form &&
          this.$refs.form.$el &&
          this.$refs.form.$el.offsetHeight;
        this.tableHeight = bodyHeight - queryHeight - 210 + "px";
      });
    },
    getTableData() {
      const params = {
        ...this.formInline,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      this.$get("/config/invoice/list", params).then((res) => {
        if (res) {
          this.tableData = res.data;
        } else {
          this.tableData = [];
        }
      });
    },
  },
  mounted() {
    this.setTableHeight();
    window.addEventListener("resize", this.setTableHeight);
    if (this.$route.query.insureInfoId) {
      this.dialogVisible = true;
    }
    this.getTableData();
    if (this.hasInvoiceId) {
      Promise.all([this.getBankList()]).then(() => {
        this.accountName = this.bank.accountName;
        this.accountType = getLabel(AccountTypeList, this.bank.accountType * 1);
        this.areaName = this.bank.areaName;
        this.bankName = this.bank.bankName;
        this.bankBranchName = this.bank.bankBranchName;
        this.accountNumber = this.bank.accountNumber;
        this.contactPhone = this.bank.contactPhone;
        this.certificateNumber = this.bank.certificateNumber;
      });
    } else {
      this.getBankList();
    }
  },
};
</script>
<style scoped lang="less">
.time {
  /deep/.el-form-item__label {
    line-height: 20px;
  }
}
</style>